// flex布局 ********************************************
.flex {
  display: flex;
}
.flex-w {
  display: flex;
  flex-wrap: wrap;
}
.flex-c {
  display: flex;
  flex-direction: column;
}
.flexAuto {
  flex: 1;
}
// .flex-1{flex:1}
@for $i from 1 through 6 {
  .flex-#{$i} {
    flex: #{$i};
  }
}
@for $i from 1 through 10 {
  @for $m from 1 through 30 {
    // flex-1-10
    .flexList-#{$i}-#{$m} {
      margin-bottom: -#{$m}px !important;
      display: flex;
      flex-wrap: wrap;
      > * {
        width: calc((100% + #{$m}px) / #{$i} - #{$m}px);
        margin-bottom: #{$m}px !important;
        margin-right: #{$m}px !important;
        &:nth-child(#{$i}n) {
          margin-right: 0 !important;
        }
        &.wAuto {
          margin-right: 0 !important;
        }
      }
    }
  }
}

// 设置主轴方向 x y
$direction: (
  // 从左到右（默认值）
  'r': row,
  // 从右到左
  'rr': row-reverse,
  // 从上到下
  'c': column,
  // 从下到上
  'cr': column-reverse
);
// 主轴上子元素排列方式
$justify: (
  // 从头部开始，如果主轴是x轴，则从左到右（默认值）
  'start': flex-start,
  // 在主轴居中对齐(如果主轴是 x 轴则水平居中)
  'center': center,
  // 从尾部开始排列
  'end': flex-end,
  // 先两边贴边，再平分剩余空间☆☆☆
  'between': space-between,
  // 平分剩余空间
  'around': space-around
);
// 侧轴上子元素排列方式
$align: (
  // 从上到下
  'start': flex-start,
  // 挤在一起居中(垂直居中)
  'center': center,
  // 从下到上
  'end': flex-end,
  // 拉伸(默认值)
  'stretch': stretch
);
@each $alignKey, $alignVal in $align {
  // flex-auto-center
  .flex-auto-#{$alignKey} {
    display: flex;
    align-items: #{$alignVal};
    > * {
      flex: 1;
    }
  }
  @each $justifyKey, $justifyVal in $justify {
    @each $directionKey, $directionVal in $direction {
      // flex-start-center
      .flex-#{$justifyKey}-#{$alignKey} {
        display: flex;
        justify-content: #{$justifyVal};
        align-items: #{$alignVal};
      }
      // flex-r-start-center
      .flex-#{$directionKey}-#{$justifyKey}-#{$alignKey} {
        display: flex;
        flex-direction: #{$directionVal};
        justify-content: #{$justifyVal};
        align-items: #{$alignVal};
      }
      .flex-#{$directionKey} {
        display: flex;
        flex-direction: #{$directionVal};
      }
    }
  }
}
